<template>
  <div class="customer-service">
    <div class="banks">
      <transition-group name="banks">
        <div v-for="(v, k) in bankList" :key="k">
          <div class="index">
            <span>{{k}}</span>
          </div>
          <div class="content">
            <div class="item" 
              v-for="(x, i) in v" :key="i" 
              :class="{active: x.id === isActive}"
              @click="bankSelect(x.id, k, i)">
              <img :src="x.image" class="logo">
              <div class="title">{{x.name}}</div>
            </div>
          </div>
        </div>
      </transition-group>
    </div>
    <div class="phones">
      <transition-group name="phones">
        <div class="item" v-for="(v, k) in phoneList" :key="k">
          <div class="title">{{v.title}}</div>
          <div class="number" v-if="v.number">{{v.number}}</div>
          <div class="text" v-if="v.text">{{v.text}}</div>
        </div>
      </transition-group>
      <mt-button type="default" :plain="true" class="dispute fixed" @click.native="showCorrection">我要纠错</mt-button>
      <correction ref="correction"></correction>
    </div>
  </div>
</template>

<script>
import Correction from '@/components/Correction'

export default {
  name: 'Phone',
  components: {
    Correction
  },
  data () {
    return {
      isActive: '19',
      bankList: {},
      phoneList: [],
      bankName: ''
    }
  },
  methods: {
    getBankList () {
      this.$post('/vue/bank/get_list', '').then(data => {
        this.bankList = data
        this.phoneList = data['B'][0].phones
        this.bankName = data['B'][0].name
      })
    },
    bankSelect (id, char, key) {
      this.isActive = id
      this.phoneList = this.bankList[char][key].phones
      this.bankName = this.bankList[char][key].name
    },
    showCorrection () {
      this.$refs.correction.popShow1 = true
      this.$refs.correction.column = '银行客服 - ' + this.bankName
    }
  },
  mounted () {
    this.getBankList()
  }
}
</script>
<style lang="less">
.banks-enter-active, .banks-leave-active, .phones-enter-active, .phones-leave-active {
  transition: all 1s;
}
.banks-enter, .banks-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
.phones-enter, .phones-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
.customer-service {
  width: 100vw;
  height: 100vh;
  background-color: #FFF;
  display: flex;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: space-between;
  overflow: hidden;
  .banks {
    height: 100%;
    flex: 0 0 34%;
    border-right: 1px solid rgb(240, 244, 247);
    overflow-y: scroll;
    -webkit-overflow-scrolling : touch;
    .index {
      padding: 0 12px;
      height: 24px;
      font-size: 12px;
      line-height: 24px;
      text-align: left;
      color: rgb(124, 124, 124);
      background-color: rgb(240, 244, 247);
    }
    .content {
      padding: 8px 0 8px 8px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      align-content: flex-start;
      justify-content: space-between;
      overflow: hidden;
      .item {
        flex: 1;
        font-size: 0;
        width: 100%;
        padding: 4px 0 4px 4px;
        margin-right: -4px;
        margin-bottom: 4px;
        background-color: #FFF;
        text-align: left;
        border-top-left-radius: 16px;
        border-bottom-left-radius: 16px;
        color: rgb(124, 124, 124);
        transition: all .25s;
        &.active {
          color: #FFF;
          background-color: rgb(108, 184, 222);
          box-shadow: 0 2px 4px 0 rgba(108, 184, 222, 0.5);
        }
      }
      &>.item:last-child {
        margin-bottom: 0;
      }
      .logo {
        width: 24px;
        height: 24px;
        margin-right: 4px;
        display: inline-block;
        vertical-align: middle;
      }
      .title {
        font-size: 13px;
        line-height: 24px;
        display: inline-block;
        vertical-align: middle;
      }
    }
  }
  .phones {
    flex: 0 0 66%;
    height: 100%;
    overflow-y: scroll;
    position: relative;
    .item {
      margin-left: 12px;
      padding: 12px 0;
      text-align: left;
      font-size: 13px;
      line-height: 24px;
      border-bottom: 1px solid rgb(226, 226, 226);
      &:last-child {
        border-bottom: none;
      }
    }
    .title {
      font-weight: bold;
      color: rgb(124, 124, 124);
    }
    .number {
      font-size: 16px;
      color: rgb(108, 184, 222);
    }
    .text {
      margin-top: 8px;
      padding-right: 12px;
      font-size: 12px;
      line-height: 20px;
      color: rgb(169, 169, 169);
    }
    .dispute {
      display: block;
      width: 46%;
      height: 32px;
      margin: 30px auto;
      font-size: 13px;
      line-height: 24px;
      color: rgb(169, 169, 169);
      border-color: rgb(226, 226, 226);
      border-radius: 16px;
      &::after {
        border-radius: 16px;
      }
      &.fixed {
        position: absolute;
        bottom: 0;
        right: 0;
        left: 0;
        margin: 40px auto;
      }
    }
  }
}
</style>